<template>
  <div class="add-robot-container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="custom-navbar"
    >
      <template #left>
        <van-icon name="arrow-left" class="nav-icon" @click="backRoute" />
      </template>
      <template #title>
        <span class="nav-title">添加机器人</span>
      </template>
      <template #right v-if="isAdded">
        <span class="complete-btn" @click="complete">完成</span>
      </template>
    </van-nav-bar>

    <!-- 内容区域 -->
    <div class="content-section">
      <!-- 添加状态 -->
      <template v-if="!isAdded">
        <div class="robot-avatar">
          <img src='/static/mobile/img/common/robot_default.png' alt="机器人头像">
        </div>

        <div class="name-input-container">
          <div class="name-input-label">机器人名字</div>
          <div class="name-input">
            <input
              type="text"
              v-model="robotName"
              placeholder="请输入机器人名称"
              maxlength="20"
            >
          </div>
        </div>



        <button
          class="add-btn"
          :disabled="!robotName.trim()"
          @click="addRobot"
        >
          添加机器人
        </button>
      </template>

      <!-- 完成状态 -->
      <template v-else>
        <div class="robot-avatar">
          <img src='/static/mobile/img/common/robot_default.png' alt="机器人头像">
          <div class="success-badge">
            <van-icon name="success" />
          </div>
        </div>

        <div class="added-text">
          <div class="robot-name-display">已添加 {{ robotName }}</div>
          <div class="robot-subtitle">配置Webhook后可推送消息到个人</div>
        </div>

        <div class="config-section">
          <div class="config-header">
            <div class="config-title">配置说明</div>
            <van-icon name="arrow" class="config-arrow" />
          </div>

          <div class="webhook-section">
            <div class="webhook-title">WebHook地址</div>
            <div class="webhook-url">
              <div class="url-text">{{ webhookUrl }}</div>
              <button class="copy-btn" @click="copyUrl">复制</button>
            </div>
          </div>
        </div>
      </template>
    </div>

  </div>
</template>

<script>
import { postAction } from '@/api'
export default {
  name: "AddRobot",
  data() {
    return {
      isAdded: false, // 控制状态切换
      robotName: '',
      webhookUrl: ''
    };
  },
  methods: {
	backRoute() {
		this.$router.go(-1);
	},
	complete() {
		this.$router.push('/coordination/myHome');
	},
	addRobot() {
		// 模拟添加操作
		this.$toast.loading({
		message: '添加中...',
		forbidClick: true,
		duration: 1000
	});

	postAction('/sys/chat/bot/addBot', {
		name: this.robotName,
		avatar:"",
    palid:""
	}).then((res) => {
		if (res.success) {
			this.webhookUrl = window._CONFIG['domainURL'] + '/sys/chat/message/sendRobotText?key=' + res.message

			setTimeout(() => {
			this.isAdded = true;
			this.$toast.clear();
			this.$toast.success('机器人添加成功');
			}, 1500);
		} else {
			console.error('加载机器人失败');
		}
	}).catch((err) => {
		console.error('加载机器人异常:', err);
	});


	},
	copyUrl() {
		// 复制URL到剪贴板
		navigator.clipboard.writeText(this.webhookUrl)
		.then(() => {
			this.$toast.success('已复制到剪贴板');
		})
		.catch(err => {
			console.error('复制失败:', err);
			this.$toast.fail('复制失败');
		});
	},
	configureRobot() {
	// 跳转到配置页面
	this.$router.push({ name: 'ConfigureRobot' });
	}
  }
};
</script>

<style scoped>
.add-robot-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f7f8fa;
}

.custom-navbar {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-title {
  font-size: 16px;
  font-weight: bold;
  color: #26B1A1;
  letter-spacing: 0.5px;
}

.complete-btn {
  font-size: 16px;
  color: #26B1A1;
  font-weight: 500;
}
.van-nav-bar .van-icon {
    color: #26B1A1;
	font-size: 16px;
}

.content-section {
  flex: 1;
  overflow-y: auto;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 机器人头像 */
.robot-avatar {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  overflow: hidden;
  margin: 20px 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #26B1A1 , #6FD0B3);
  position: relative;
}

.robot-avatar img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

/* 名称输入区域 */
.name-input-container {
  width: 100%;
  max-width: 400px;
  margin-bottom: 40px;

}

.name-input-label {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.name-input {
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.name-input input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
}



.add-btn {
  width: 100%;
  max-width: 350px;
  height: 50px;
  border-radius: 8px;
  background: linear-gradient(90deg, #26B1A1 , #6FD0B3);
  color: white;
  font-size: 18px;
  font-weight: 500;
  border: none;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
  margin-top: 20px;
}

.add-btn:disabled {
  background: #c8c9cc;
  box-shadow: none;
}

/* 成功徽章 */
.success-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #07c160;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  border: 3px solid white;
}

/* 添加完成后的文本 */
.added-text {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 40px;
}

.robot-name-display {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
}

.robot-subtitle {
  font-size: 15px;
  color: #7d7e80;
}

/* 配置区域 */
.config-section {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.config-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.config-arrow {
  color: #c8c9cc;
  font-size: 18px;
}

.webhook-section {
  margin-top: 20px;
}

.webhook-title {
  font-size: 14px;
  color: #7d7e80;
  margin-bottom: 8px;
}

.webhook-url {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 8px;
}

.url-text {
  font-size: 14px;
  color: #333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 10px;
}

.copy-btn {
  background: #e6f7ff;
  color: #1890ff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border: none;
}
</style>
